<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="序号" width="80"> </el-table-column>
    <el-table-column v-for="item in tableCont" :key="item.id" :prop="item.prop" :width="item.prop == 'addDate' ? '220' : ''" :label="item.lable"> </el-table-column>
    <el-table-column label="操作" width="230">
      <template slot-scope="scope">
        <div v-if="tableCont.length==7">
        <span @click="$router.push({ name: 'subjects-directorys', query: { id: scope.row.id ,name:scope.row.username} })">学科分类</span>
        <span @click="$router.push({ name: 'subjects-tags', query: { id: scope.row.id,name:scope.row.username } })">学科标签</span>
        <span @click="edit(scope)">修改</span>
        <span @click="del(scope)">删除</span>
        </div>
        <div v-else>
        <el-button type="text" @click="changeState(scope)">{{scope.row.state=='已禁用'?'启用':'禁用'}}</el-button>
        <el-button type="text" @click="edit(scope)" :disabled="scope.row.state=='已禁用'">修改</el-button>
        <el-button type="text" @click="del(scope)" :disabled="scope.row.state=='已禁用'||scope.row.totals>0">删除</el-button>
        </div>
      </template>
    </el-table-column>
    <el-dialog :append-to-body="true" title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span><b class="el-icon-warning"></b> 此操作将永久删除该数据，是否继续？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </el-table>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array
    },
    tableCont: {
      type: Array
    }
  },
  data () {
    return {
      dialogVisible: false,
      delValue: {}
    }
  },
  methods: {
    del (val) {
      this.dialogVisible = true
      this.delValue = val.row
    },
    edit (val) {
      this.$emit('edit', val.row)
    },
    handleClose () {
      this.dialogVisible = false
    },
    confirm () {
      this.$emit('del', this.delValue)
      this.dialogVisible = false
      this.$message.success('删除成功')
    },
    changeState (val) {
      this.$emit('change', val.row)
    }
  }
}
</script>
<style scoped lang="scss">
.el-table__body-wrapper {
  span {
    cursor: pointer;
    color: #409eff;
    margin: 0 5px;
  }
}
.el-dialog__body{
  b{
    color: orange;
  }
}
</style>
